<template>
  <el-row class="nav-frame">
    <el-col class="nav-cont" :span="24">
        <el-menu
        background-color="#324057"
        text-color="#fff"
        active-text-color="#409eff"
        default-active="1"
        >
            <router-link to="/main">
                <el-menu-item index="1">
                    <i class="el-icon-setting"></i>
                    <span slot="title">首页</span>
                </el-menu-item> 
            </router-link>   
            <template v-for="item of items">
                <el-submenu :index="item.path" :key="item.path">
                    <template slot="title">
                        <i :class="'fa '+item.icon"></i>
                        <span>{{item.name}}</span>
                    </template>
                    <router-link v-for="(chilItem,chilInedx) of item.children"
                    :to="chilItem.path"
                    :key="chilInedx">
                        <el-menu-item :index="item.path" :key="chilItem.path">
                            <span slot="title">{{chilItem.childName}}</span>
                        </el-menu-item>
                    </router-link>
                </el-submenu>
            </template>
        
        </el-menu>
    </el-col>
    </el-row>
</template>

<script>
export default {
  name: 'NavAside',
  data(){
    return {
        items:[
            {
                icon:"fa-money",
                name:"资金管理",
                path:"fundManage",
                children:[
                    {
                        path:"/main/profiles",
                        childName:"资金流水"
                    }
                ]
            },
            {
                icon:"fa-cog",
                name:"信息管理",
                path:"perinfo",
                children:[
                    {
                        path:"/main/perinfo",
                        childName:"个人信息"
                    }
                ]
            }
        ]
    }
  },
  methods:{

  }
}
</script>

<style scoped>
.el-menu{
    border: 0;
    height: 100%;
    text-align: left;
}
.nav-cont{
    height: 100%;
    width: 100%;
}
.nav-frame{
    width: 100%;
    height: 100%;
    background: #324057;
}
</style>
